<template>
  <div class="events-container">
    <AppHeader />

    <div class="content-wrapper">
      <!-- 侧边导航 -->
      <SideNav 
        :title="'赛事'"
        :tabs="tabs"
        :active-tab="activeTab"
        @tab-click="handleTabClick"
      />

      <!-- 主要内容区域 -->
      <main class="events-main">
      <!-- 热门赛事 -->
      <section v-if="activeTab === 'hot'" class="events-section">
        <h2 class="section-title">热门赛事</h2>
        
        <!-- 赛事焦点轮播 -->
        <div class="featured-carousel">
          <div class="carousel-item" v-for="(event, index) in featuredEvents" :key="index" :class="{ active: currentSlide === index }">
            <div class="carousel-content" @click="openEventDetail(event)">
              <img :src="event.banner" :alt="event.title" class="carousel-image" />
              <div class="carousel-info">
                <div class="event-status" :class="event.statusClass">{{ event.status }}</div>
                <h3 class="carousel-title">{{ event.title }}</h3>
                <p class="carousel-desc">{{ event.description }}</p>
                <div class="carousel-meta">
                  <span class="meta-item">
                    <i class="icon-time">🕐</i> {{ event.time }}
                  </span>
                  <span class="meta-item">
                    <i class="icon-view">👁️</i> {{ event.views }}万观看
                  </span>
                </div>
                <div class="carousel-actions">
                  <button class="btn-watch" @click.stop="watchEvent(event)">观看直播</button>
                  <button class="btn-remind" @click.stop="remindEvent(event)">
                    {{ isReminded(event.id) ? '已提醒' : '设置提醒' }}
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 轮播控制 -->
          <div class="carousel-controls">
            <button class="carousel-prev" @click="prevSlide">&lt;</button>
            <button class="carousel-next" @click="nextSlide">&gt;</button>
          </div>
          
          <!-- 轮播指示器 -->
          <div class="carousel-indicators">
            <button 
              v-for="(event, index) in featuredEvents" 
              :key="index"
              class="indicator" 
              :class="{ active: currentSlide === index }"
              @click="currentSlide = index"
            ></button>
          </div>
        </div>

        <!-- 进行中的赛事 -->
        <div class="live-events-section">
          <div class="section-header">
            <h3 class="category-title">
              <span class="live-icon">🔴</span> 正在直播
            </h3>
            <a href="#" class="view-more">全部直播</a>
          </div>
          <div class="events-grid">
            <div 
              v-for="event in liveEvents" 
              :key="event.id" 
              class="event-card live"
              @click="openEventDetail(event)"
            >
              <div class="event-thumbnail">
                <img :src="event.thumbnail" alt="{{ event.title }}" />
                <div class="live-badge">LIVE</div>
                <div class="viewer-count">{{ event.viewers }}万观看</div>
                <div class="event-time">{{ event.startTime }}</div>
              </div>
              <div class="event-info">
                <h4 class="event-title">{{ event.title }}</h4>
                <div class="event-teams">
                  <div class="team">
                    <img :src="event.team1.logo" :alt="event.team1.name" class="team-logo" />
                    <span class="team-name">{{ event.team1.name }}</span>
                  </div>
                  <div class="vs">VS</div>
                  <div class="team">
                    <span class="team-name">{{ event.team2.name }}</span>
                    <img :src="event.team2.logo" :alt="event.team2.name" class="team-logo" />
                  </div>
                </div>
                <div class="event-game">{{ event.game }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 即将开始 -->
        <div class="upcoming-events-section">
          <div class="section-header">
            <h3 class="category-title">即将开始</h3>
            <a href="#" class="view-more">更多赛程</a>
          </div>
          <div class="events-list">
            <div 
              v-for="event in upcomingEvents" 
              :key="event.id" 
              class="event-item"
              @click="openEventDetail(event)"
            >
              <div class="event-date">{{ event.date }}</div>
              <div class="event-content">
                <div class="event-matchup">
                  <div class="team-info">
                    <img :src="event.team1.logo" :alt="event.team1.name" class="team-logo-small" />
                    <span class="team-name">{{ event.team1.name }}</span>
                  </div>
                  <div class="match-info">
                    <div class="vs-text">VS</div>
                    <div class="match-time">{{ event.time }}</div>
                    <button class="btn-remind-small" @click.stop="remindEvent(event)">
                      {{ isReminded(event.id) ? '已提醒' : '⏰' }}
                    </button>
                  </div>
                  <div class="team-info right">
                    <span class="team-name">{{ event.team2.name }}</span>
                    <img :src="event.team2.logo" :alt="event.team2.name" class="team-logo-small" />
                  </div>
                </div>
                <div class="event-details">
                  <span class="event-league">{{ event.league }}</span>
                  <span class="event-stage">{{ event.stage }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 赛事列表 -->
      <section v-else-if="activeTab === 'schedule'" class="events-section">
        <h2 class="section-title">赛事日程</h2>
        
        <!-- 日期选择器 -->
        <div class="date-selector">
          <button 
            v-for="(date, index) in dateOptions" 
            :key="index" 
            class="date-button"
            :class="{ active: activeDate === date.value }"
            @click="activeDate = date.value"
          >
            <div class="date-day">{{ date.day }}</div>
            <div class="date-date">{{ date.date }}</div>
          </button>
        </div>
        
        <!-- 游戏筛选 -->
        <div class="game-filter">
          <button 
            v-for="game in gameFilters" 
            :key="game.key" 
            class="game-filter-button"
            :class="{ active: activeGame === game.key }"
            @click="activeGame = game.key"
          >
            {{ game.name }}
          </button>
        </div>
        
        <!-- 当日赛事 -->
        <div class="day-events">
          <div class="event-status-group">
            <h4 class="status-title">
              <span class="live-icon">🔴</span> 正在直播
            </h4>
            <div 
              v-for="event in dayLiveEvents" 
              :key="event.id" 
              class="event-item detailed"
              @click="openEventDetail(event)"
            >
              <div class="event-time-badge">{{ event.time }}</div>
              <div class="event-main">
                <div class="event-teams-large">
                  <div class="team-large">
                    <img :src="event.team1.logo" :alt="event.team1.name" class="team-logo-medium" />
                    <span class="team-name-large">{{ event.team1.name }}</span>
                  </div>
                  <div class="vs-large">VS</div>
                  <div class="team-large">
                    <span class="team-name-large">{{ event.team2.name }}</span>
                    <img :src="event.team2.logo" :alt="event.team2.name" class="team-logo-medium" />
                  </div>
                </div>
                <div class="event-extra">
                  <span class="event-league">{{ event.league }}</span>
                  <span class="event-stage">{{ event.stage }}</span>
                  <button class="btn-watch-small" @click.stop="watchEvent(event)">观看</button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="event-status-group">
            <h4 class="status-title">即将开始</h4>
            <div 
              v-for="event in dayUpcomingEvents" 
              :key="event.id" 
              class="event-item detailed"
              @click="openEventDetail(event)"
            >
              <div class="event-time-badge">{{ event.time }}</div>
              <div class="event-main">
                <div class="event-teams-large">
                  <div class="team-large">
                    <img :src="event.team1.logo" :alt="event.team1.name" class="team-logo-medium" />
                    <span class="team-name-large">{{ event.team1.name }}</span>
                  </div>
                  <div class="vs-large">VS</div>
                  <div class="team-large">
                    <span class="team-name-large">{{ event.team2.name }}</span>
                    <img :src="event.team2.logo" :alt="event.team2.name" class="team-logo-medium" />
                  </div>
                </div>
                <div class="event-extra">
                  <span class="event-league">{{ event.league }}</span>
                  <span class="event-stage">{{ event.stage }}</span>
                  <button class="btn-remind-small" @click.stop="remindEvent(event)">
                    {{ isReminded(event.id) ? '已提醒' : '提醒' }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 赛事分类 -->
      <section v-else-if="activeTab === 'leagues'" class="events-section">
        <h2 class="section-title">赛事分类</h2>
        
        <div class="leagues-grid">
          <div 
            v-for="league in leagues" 
            :key="league.id" 
            class="league-card"
            @click="browseLeague(league)"
          >
            <div class="league-header">
              <img :src="league.logo" :alt="league.name" class="league-logo" />
              <h4 class="league-name">{{ league.name }}</h4>
            </div>
            <p class="league-desc">{{ league.description }}</p>
            <div class="league-info">
              <span class="league-game">{{ league.game }}</span>
              <span class="league-status" :class="league.statusClass">{{ league.status }}</span>
            </div>
            <div class="league-teams">
              <img 
                v-for="(team, index) in league.topTeams.slice(0, 4)" 
                :key="index" 
                :src="team" 
                alt="Team" 
                class="small-team-logo"
                :title="`参赛队伍 ${index + 1}`"
              />
              <span v-if="league.topTeams.length > 4" class="more-teams">+{{ league.topTeams.length - 4 }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 我的关注 -->
      <section v-else-if="activeTab === 'my'" class="events-section">
        <h2 class="section-title">我的关注</h2>
        
        <div class="my-events-tabs">
          <button 
            v-for="tab in myEventsTabs" 
            :key="tab.key" 
            class="tab-button"
            :class="{ active: activeMyEventsTab === tab.key }"
            @click="activeMyEventsTab = tab.key"
          >
            {{ tab.name }}
          </button>
        </div>
        
        <div v-if="activeMyEventsTab === 'reminders'" class="reminders-list">
          <div 
            v-for="event in remindedEvents" 
            :key="event.id" 
            class="reminder-item"
            @click="openEventDetail(event)"
          >
            <div class="reminder-time">{{ event.reminderTime }}</div>
            <div class="reminder-content">
              <h4 class="reminder-title">{{ event.title }}</h4>
              <div class="reminder-teams">
                <span class="team-name">{{ event.team1.name }}</span>
                <span class="vs">VS</span>
                <span class="team-name">{{ event.team2.name }}</span>
              </div>
              <div class="reminder-actions">
                <button class="btn-cancel-reminder" @click.stop="cancelReminder(event.id)">取消提醒</button>
                <button class="btn-watch-reminder" @click.stop="watchEvent(event)">观看</button>
              </div>
            </div>
          </div>
        </div>
        
        <div v-else-if="activeMyEventsTab === 'teams'" class="teams-grid">
          <div 
            v-for="team in followedTeams" 
            :key="team.id" 
            class="team-card"
            @click="viewTeam(team)"
          >
            <img :src="team.logo" :alt="team.name" class="team-card-logo" />
            <h4 class="team-card-name">{{ team.name }}</h4>
            <div class="team-stats">
              <span class="team-winrate">胜率: {{ team.winRate }}%</span>
              <span class="team-ranking">排名: #{{ team.ranking }}</span>
            </div>
            <button class="btn-unfollow" @click.stop="unfollowTeam(team.id)">取消关注</button>
          </div>
        </div>
      </section>
    </main>
    </div>
    
    <footer class="app-footer">
      <div class="footer-content">
        <p>© 2024 电竞赛事 - 版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import AppHeader from '../components/AppHeader.vue'
import SideNav from '../components/SideNav.vue'

export default {
  name: 'EventsView',
  components: {
    AppHeader,
    SideNav
  },
  methods: {
    handleTabClick(tabKey) {
      this.activeTab = tabKey
    }
  },
  setup() {
    // 导航标签
    const tabs = ref([
      { key: 'hot', name: '热门' },
      { key: 'schedule', name: '赛程' },
      { key: 'leagues', name: '赛事' },
      { key: 'my', name: '我的', badge: '2' }
    ])
    
    const activeTab = ref('hot')
    const currentSlide = ref(0)
    const activeDate = ref('today')
    const activeGame = ref('all')
    const myEventsTabs = ref([
      { key: 'reminders', name: '我的提醒' },
      { key: 'teams', name: '关注战队' }
    ])
    const activeMyEventsTab = ref('reminders')
    const remindedEventsIds = ref(new Set())
    const followedTeamsIds = ref(new Set())

    // 精选赛事数据
    const featuredEvents = ref([
      {
        id: 1,
        title: '2024英雄联盟全球总决赛 - 决赛',
        description: '全球最顶尖的16支英雄联盟战队汇聚一堂，争夺世界冠军的荣誉和巨额奖金池。',
        banner: 'https://picsum.photos/id/265/800/400',
        thumbnail: 'https://picsum.photos/id/265/400/225',
        status: '进行中',
        statusClass: 'live',
        time: '19:00 - 22:00',
        views: 1200,
        viewers: 280,
        game: '英雄联盟',
        team1: {
          name: 'T1',
          logo: 'https://picsum.photos/id/266/50/50'
        },
        team2: {
          name: 'BLG',
          logo: 'https://picsum.photos/id/267/50/50'
        },
        league: '英雄联盟全球总决赛',
        stage: '决赛',
        startTime: '19:00',
        date: '今天',
        reminderTime: '今天 18:50'
      },
      {
        id: 2,
        title: '2024 DOTA2国际邀请赛 - 半决赛',
        description: 'DOTA2年度最高规格赛事，汇聚全球顶尖战队，共同角逐世界冠军。',
        banner: 'https://picsum.photos/id/268/800/400',
        thumbnail: 'https://picsum.photos/id/268/400/225',
        status: '即将开始',
        statusClass: 'upcoming',
        time: '20:00 - 23:30',
        views: 850,
        viewers: 0,
        game: 'DOTA2',
        team1: {
          name: 'PSG.LGD',
          logo: 'https://picsum.photos/id/269/50/50'
        },
        team2: {
          name: 'Team Spirit',
          logo: 'https://picsum.photos/id/270/50/50'
        },
        league: 'DOTA2国际邀请赛',
        stage: '半决赛',
        startTime: '20:00',
        date: '今天',
        reminderTime: '今天 19:50'
      },
      {
        id: 3,
        title: '2024 CS2 Major锦标赛 - 四分之一决赛',
        description: 'Counter-Strike 2最高级别赛事，16支顶尖战队争夺冠军奖杯。',
        banner: 'https://picsum.photos/id/271/800/400',
        thumbnail: 'https://picsum.photos/id/271/400/225',
        status: '即将开始',
        statusClass: 'upcoming',
        time: '18:00 - 21:00',
        views: 620,
        viewers: 0,
        game: 'CS2',
        team1: {
          name: 'Natus Vincere',
          logo: 'https://picsum.photos/id/272/50/50'
        },
        team2: {
          name: 'FaZe Clan',
          logo: 'https://picsum.photos/id/273/50/50'
        },
        league: 'CS2 Major锦标赛',
        stage: '四分之一决赛',
        startTime: '18:00',
        date: '今天',
        reminderTime: '今天 17:50'
      }
    ])

    // 正在直播的赛事
    const liveEvents = ref([
      {
        id: 101,
        title: '英雄联盟全球总决赛 - 决赛',
        thumbnail: 'https://picsum.photos/id/265/400/225',
        viewers: 280,
        startTime: '19:00',
        game: '英雄联盟',
        team1: {
          name: 'T1',
          logo: 'https://picsum.photos/id/266/50/50'
        },
        team2: {
          name: 'BLG',
          logo: 'https://picsum.photos/id/267/50/50'
        }
      },
      {
        id: 102,
        title: '王者荣耀职业联赛 - 季后赛',
        thumbnail: 'https://picsum.photos/id/274/400/225',
        viewers: 156,
        startTime: '18:30',
        game: '王者荣耀',
        team1: {
          name: 'AG超玩会',
          logo: 'https://picsum.photos/id/275/50/50'
        },
        team2: {
          name: '武汉eStarPro',
          logo: 'https://picsum.photos/id/276/50/50'
        }
      },
      {
        id: 103,
        title: '和平精英职业联赛 - 常规赛',
        thumbnail: 'https://picsum.photos/id/277/400/225',
        viewers: 89,
        startTime: '17:00',
        game: '和平精英',
        team1: {
          name: '4AM',
          logo: 'https://picsum.photos/id/278/50/50'
        },
        team2: {
          name: 'PeRo',
          logo: 'https://picsum.photos/id/279/50/50'
        }
      }
    ])

    // 即将开始的赛事
    const upcomingEvents = ref([
      {
        id: 201,
        title: 'DOTA2国际邀请赛 - 半决赛',
        time: '20:00',
        date: '今天',
        league: 'DOTA2国际邀请赛',
        stage: '半决赛',
        team1: {
          name: 'PSG.LGD',
          logo: 'https://picsum.photos/id/269/50/50'
        },
        team2: {
          name: 'Team Spirit',
          logo: 'https://picsum.photos/id/270/50/50'
        },
        reminderTime: '今天 19:50'
      },
      {
        id: 202,
        title: 'CS2 Major锦标赛 - 四分之一决赛',
        time: '18:00',
        date: '今天',
        league: 'CS2 Major锦标赛',
        stage: '四分之一决赛',
        team1: {
          name: 'Natus Vincere',
          logo: 'https://picsum.photos/id/272/50/50'
        },
        team2: {
          name: 'FaZe Clan',
          logo: 'https://picsum.photos/id/273/50/50'
        },
        reminderTime: '今天 17:50'
      },
      {
        id: 203,
        title: '王者荣耀冬季冠军杯 - 小组赛',
        time: '21:00',
        date: '今天',
        league: '王者荣耀冬季冠军杯',
        stage: '小组赛',
        team1: {
          name: '成都AG',
          logo: 'https://picsum.photos/id/280/50/50'
        },
        team2: {
          name: '重庆QGhappy',
          logo: 'https://picsum.photos/id/281/50/50'
        },
        reminderTime: '今天 20:50'
      }
    ])

    // 日期选项
    const dateOptions = ref([
      { value: 'today', day: '今天', date: '12/20' },
      { value: 'tomorrow', day: '明天', date: '12/21' },
      { value: 'day3', day: '周五', date: '12/22' },
      { value: 'day4', day: '周六', date: '12/23' },
      { value: 'day5', day: '周日', date: '12/24' },
      { value: 'week', day: '本周', date: '12/20-26' }
    ])

    // 游戏筛选
    const gameFilters = ref([
      { key: 'all', name: '全部' },
      { key: 'lol', name: '英雄联盟' },
      { key: 'dota2', name: 'DOTA2' },
      { key: 'cs2', name: 'CS2' },
      { key: 'wzry', name: '王者荣耀' },
      { key: 'pubg', name: '和平精英' }
    ])

    // 当日直播赛事
    const dayLiveEvents = ref([...liveEvents.value.slice(0, 2)])

    // 当日即将开始赛事
    const dayUpcomingEvents = ref([...upcomingEvents.value])

    // 赛事分类
    const leagues = ref([
      {
        id: 301,
        name: '英雄联盟全球总决赛',
        logo: 'https://picsum.photos/id/282/80/80',
        description: '英雄联盟年度最高级别赛事，全球16支顶尖战队参赛',
        game: '英雄联盟',
        status: '进行中',
        statusClass: 'live',
        topTeams: [
          'https://picsum.photos/id/266/40/40',
          'https://picsum.photos/id/267/40/40',
          'https://picsum.photos/id/283/40/40',
          'https://picsum.photos/id/284/40/40',
          'https://picsum.photos/id/285/40/40'
        ]
      },
      {
        id: 302,
        name: 'DOTA2国际邀请赛',
        logo: 'https://picsum.photos/id/286/80/80',
        description: 'DOTA2年度最大规模赛事，拥有电竞史上最高奖金池',
        game: 'DOTA2',
        status: '即将开始',
        statusClass: 'upcoming',
        topTeams: [
          'https://picsum.photos/id/269/40/40',
          'https://picsum.photos/id/270/40/40',
          'https://picsum.photos/id/287/40/40',
          'https://picsum.photos/id/288/40/40'
        ]
      },
      {
        id: 303,
        name: '王者荣耀职业联赛',
        logo: 'https://picsum.photos/id/289/80/80',
        description: '王者荣耀官方顶级职业赛事，汇集国内顶尖战队',
        game: '王者荣耀',
        status: '进行中',
        statusClass: 'live',
        topTeams: [
          'https://picsum.photos/id/275/40/40',
          'https://picsum.photos/id/276/40/40',
          'https://picsum.photos/id/280/40/40',
          'https://picsum.photos/id/281/40/40',
          'https://picsum.photos/id/290/40/40'
        ]
      },
      {
        id: 304,
        name: 'CS2 Major锦标赛',
        logo: 'https://picsum.photos/id/291/80/80',
        description: 'Counter-Strike 2官方最高级别赛事',
        game: 'CS2',
        status: '即将开始',
        statusClass: 'upcoming',
        topTeams: [
          'https://picsum.photos/id/272/40/40',
          'https://picsum.photos/id/273/40/40',
          'https://picsum.photos/id/292/40/40',
          'https://picsum.photos/id/293/40/40'
        ]
      }
    ])

    // 提醒的赛事
    const remindedEvents = ref([...upcomingEvents.value.slice(0, 2)])

    // 关注的战队
    const followedTeams = ref([
      {
        id: 401,
        name: 'T1',
        logo: 'https://picsum.photos/id/266/80/80',
        winRate: 85,
        ranking: 1
      },
      {
        id: 402,
        name: 'BLG',
        logo: 'https://picsum.photos/id/267/80/80',
        winRate: 78,
        ranking: 3
      },
      {
        id: 403,
        name: 'PSG.LGD',
        logo: 'https://picsum.photos/id/269/80/80',
        winRate: 82,
        ranking: 2
      },
      {
        id: 404,
        name: 'AG超玩会',
        logo: 'https://picsum.photos/id/275/80/80',
        winRate: 75,
        ranking: 4
      }
    ])

    // 轮播控制
    const prevSlide = () => {
      currentSlide.value = (currentSlide.value - 1 + featuredEvents.value.length) % featuredEvents.value.length
    }

    const nextSlide = () => {
      currentSlide.value = (currentSlide.value + 1) % featuredEvents.value.length
    }

    // 赛事操作
    const openEventDetail = (event) => {
      console.log('打开赛事详情:', event.title)
      // 实际应用中应使用路由跳转
    }

    const watchEvent = (event) => {
      console.log('观看赛事:', event.title)
    }

    const remindEvent = (event) => {
      if (remindedEventsIds.value.has(event.id)) {
        remindedEventsIds.value.delete(event.id)
      } else {
        remindedEventsIds.value.add(event.id)
      }
    }

    const isReminded = (id) => {
      return remindedEventsIds.value.has(id)
    }

    const cancelReminder = (id) => {
      remindedEventsIds.value.delete(id)
    }

    const browseLeague = (league) => {
      console.log('浏览赛事:', league.name)
    }

    const viewTeam = (team) => {
      console.log('查看战队:', team.name)
    }

    const unfollowTeam = (id) => {
      followedTeamsIds.value.delete(id)
    }

    onMounted(() => {
      // 自动轮播
      let interval = setInterval(() => {
        nextSlide()
      }, 5000)

      // 添加鼠标悬停暂停自动轮播
      const carousel = document.querySelector('.featured-carousel')
      if (carousel) {
        carousel.addEventListener('mouseenter', () => {
          clearInterval(interval)
        })
        carousel.addEventListener('mouseleave', () => {
          interval = setInterval(() => {
            nextSlide()
          }, 5000)
        })
      }

      // 清理
      return () => {
        clearInterval(interval)
        if (carousel) {
          carousel.removeEventListener('mouseenter', () => {})
          carousel.removeEventListener('mouseleave', () => {})
        }
      }
    })

    return {
      tabs,
      activeTab,
      currentSlide,
      activeDate,
      activeGame,
      myEventsTabs,
      activeMyEventsTab,
      featuredEvents,
      liveEvents,
      upcomingEvents,
      dateOptions,
      gameFilters,
      dayLiveEvents,
      dayUpcomingEvents,
      leagues,
      remindedEvents,
      followedTeams,
      prevSlide,
      nextSlide,
      openEventDetail,
      watchEvent,
      remindEvent,
      isReminded,
      cancelReminder,
      browseLeague,
      viewTeam,
      unfollowTeam
    }
  }
}
</script>

<style scoped>
.events-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex: 1;
}

.events-main {
  flex: 1;
  max-width: calc(100% - 240px);
  margin: 0;
  padding: 20px 30px;
}

.events-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.category-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-icon {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

.view-more {
  color: #2ed573;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.view-more:hover {
  text-decoration: underline;
}

/* 轮播样式 */
.featured-carousel {
  position: relative;
  height: 400px;
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.carousel-item.active {
  opacity: 1;
  z-index: 2;
}

.carousel-content {
  height: 100%;
  display: flex;
  position: relative;
  cursor: pointer;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
}

.event-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.event-status.live {
  background: #ff4757;
  color: #fff;
}

.event-status.upcoming {
  background: #ffa502;
  color: #fff;
}

.event-status.ended {
  background: #6c757d;
  color: #fff;
}

.carousel-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}

.carousel-desc {
  font-size: 16px;
  margin-bottom: 15px;
  opacity: 0.9;
  max-width: 800px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carousel-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  opacity: 0.9;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.carousel-actions {
  display: flex;
  gap: 15px;
}

.btn-watch, .btn-remind {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-watch {
  background: #2ed573;
  color: #fff;
}

.btn-watch:hover {
  background: #20bf6b;
  transform: translateY(-2px);
}

.btn-remind {
  background: #fff;
  color: #333;
}

.btn-remind:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.carousel-prev, .carousel-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-prev:hover, .carousel-next:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #fff;
  transform: scale(1.2);
}

/* 赛事卡片网格 */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

.event-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.event-card.live {
  border: 2px solid #ff4757;
}

.event-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

.event-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.event-card:hover .event-thumbnail img {
  transform: scale(1.05);
}

.live-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 12px;
  background: #ff4757;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  animation: pulse 1.5s infinite;
}

.viewer-count {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
}

.event-time {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
}

.event-info {
  padding: 15px;
}

.event-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.event-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.team {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.team-name {
  font-weight: 500;
  color: #333;
}

.vs {
  font-weight: 600;
  color: #666;
  font-size: 16px;
}

.event-game {
  font-size: 14px;
  color: #666;
}

/* 赛事列表 */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.event-item {
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.event-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.event-date {
  width: 80px;
  flex-shrink: 0;
  background: #2ed573;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.event-content {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-matchup {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.team-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-info.right {
  flex-direction: row-reverse;
}

.team-logo-small {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.match-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vs-text {
  font-weight: 600;
  color: #666;
}

.match-time {
  font-size: 14px;
  color: #2ed573;
  font-weight: 500;
}

.btn-remind-small {
  padding: 4px 12px;
  border: 1px solid #2ed573;
  background: #fff;
  color: #2ed573;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-remind-small:hover {
  background: #2ed573;
  color: #fff;
}

.event-details {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #666;
}

.event-league {
  font-weight: 500;
}

.event-stage {
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

/* 日期选择器 */
.date-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.date-button {
  flex: 1;
  min-width: 80px;
  padding: 12px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.date-button:hover, .date-button.active {
  border-color: #2ed573;
  background: #f0f9f3;
  color: #2ed573;
}

.date-day {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

.date-date {
  font-size: 14px;
  color: #666;
}

/* 游戏筛选 */
.game-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.game-filter-button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.game-filter-button:hover, .game-filter-button.active {
  border-color: #2ed573;
  color: #2ed573;
  background: #f0f9f3;
}

/* 详细赛事项 */
.event-item.detailed {
  flex-direction: column;
  border-left: 4px solid #2ed573;
}

.event-time-badge {
  background: #2ed573;
  color: #fff;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 16px;
}

.event-main {
  padding: 15px;
}

.event-teams-large {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.team-large {
  display: flex;
  align-items: center;
  gap: 15px;
}

.team-large:last-child {
  flex-direction: row-reverse;
}

.team-logo-medium {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.team-name-large {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.vs-large {
  font-size: 20px;
  font-weight: 700;
  color: #666;
}

.event-extra {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  color: #666;
}

.btn-watch-small {
  margin-left: auto;
  padding: 6px 16px;
  background: #2ed573;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-watch-small:hover {
  background: #20bf6b;
}

.event-status-group {
  margin-bottom: 30px;
}

.status-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 赛事卡片 */
.leagues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.league-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.league-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.league-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.league-logo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.league-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.league-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.league-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.league-game {
  background: #f0f0f0;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
}

.league-status {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.league-teams {
  display: flex;
  align-items: center;
  gap: 8px;
}

.small-team-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.more-teams {
  font-size: 12px;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 12px;
}

/* 我的赛事标签 */
.my-events-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* 提醒列表 */
.reminders-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.reminder-item {
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.reminder-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.reminder-time {
  width: 100px;
  flex-shrink: 0;
  background: #ffa502;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.reminder-content {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reminder-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.reminder-teams {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  color: #333;
}

.reminder-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.btn-cancel-reminder {
  padding: 6px 16px;
  border: 1px solid #ff4757;
  background: #fff;
  color: #ff4757;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel-reminder:hover {
  background: #ff4757;
  color: #fff;
}

.btn-watch-reminder {
  padding: 6px 16px;
  background: #2ed573;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-watch-reminder:hover {
  background: #20bf6b;
}

/* 战队网格 */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.team-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.team-card-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.team-card-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.team-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.team-winrate {
  color: #2ed573;
  font-weight: 600;
}

.team-ranking {
  color: #ffa502;
  font-weight: 600;
}

.btn-unfollow {
  padding: 8px 24px;
  border: 1px solid #ff4757;
  background: #fff;
  color: #ff4757;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-unfollow:hover {
  background: #ff4757;
  color: #fff;
}

/* 页脚 */
.app-footer {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}
</style>